<template>
  <view class="changeStock">
    <view class="sellArea">
      <text class="title">
        建议卖出以下可转债
      </text>
      <listItem v-for='(item, index) in sellList' @haschange='handleSellChange' :index='index' :key="index" :info='item'/>
    </view>
    
    <view class="buyArea">
      <text class="title">
        建议买入以下可转债
      </text>
      <listItem v-for='(item, index) in buyList' @haschange='handleBuyChange' :key="index" :info='item' :index='index'/>
    </view>
    
    <view class="totalArea">
      <view class="info">
        预计卖出{{sellTotal.totalNum}}只，共{{sellTotal.totalPrice}}元，买入{{buyTotal.totalNum}}只，共{{buyTotal.totalPrice.toFixed(2)}}元
      </view>
      
      <view class="btnArea">
        <button type="primary" :disabled="disabledConfirm" @click="confirmChange">确定</button>
      </view>
      
    </view>
    
  </view>
</template>

<script>
  
  import listItem from './_components/listItem.vue'
  
  import { getChangeStockList, changeStock } from './_api/index.js'
  
  export default {
    components: {
      listItem
    },
    data () {
      return {
        sellList: [],
        buyList: []
      }
    },
    computed:{
      // hold_quantity是持仓数量,num是买入卖出数量
      disabledConfirm() {
        const valid = this.sellList.some(item => item.num > item.hold_quantity)
        return valid
      },
      sellTotal() {
        let totalNum = 0
        let totalPrice = 0
        this.sellList.forEach(item => {
          totalNum += Number(item.num)
          totalPrice += Number(item.price) * 10
        })
        return {
          totalNum,totalPrice
        }
      },
      buyTotal() {
        let totalNum = 0
        let totalPrice = 0
        this.buyList.forEach(item => {
          totalNum += Number(item.num)
          totalPrice += Number(item.price) * 10
        })
        return {
          totalNum,totalPrice
        }
      }
    },
    methods:{
      handleSellChange(data,index) {
        this.$set(this.sellList, index, data)
      },
      handleBuyChange(data, index) {
        this.$set(this.buyList, index, data)
      },
      getChangeStockListReq() {
        getChangeStockList()
          .then(res => {
            this.sellList = res.data.should_sell
            this.buyList = res.data.should_purchase
          })
          .catch(_ => {})
      },
      
      confirmChange() {
        const data = {
          sell: this.sellList,
          purchase: this.buyList
        }
        changeStock(data)
          .then(() => {
            uni.showToast({
              title: '操作成功'
            })
            uni.switchTab({
              url: '/pages/stock/stockList/stock'
            })
          })
          .catch(_ => {})
      }
    },
    created() {
      this.getChangeStockListReq()
    },
    onPullDownRefresh() {
      this.getChangeStockListReq()
    }
  }
</script>

<style lang="scss" scoped>
  .title {
    display: inline-block;
    margin-bottom: 30rpx;
    border-bottom:  2rpx solid #808080;
  }
  
  .changeStock {
    margin: 30rpx auto;
    // padding: 15rpx;
    width: 690rpx;
    // box-shadow: 0 0 10rpx #333;
    // border-radius: 10rpx;
    .buyArea {
      margin-top: 50rpx;
    }
  }

  .totalArea {
    margin-top: 50rpx;
    font-size: 30rpx;
    .btnArea {
      margin: 30rpx auto;
    }
  }

</style>
